<template>
  <el-dialog title="所属部门" width="600px" :visible.sync="visible" append-to-body @close="hide">
    <div class="select-modal-content">
      <search-org-tree ref="searchOrgTree" @on-select-change="onSelectChange" />
    </div>
    <div slot="footer">
      <el-button @click="hide">取 消</el-button>
      <el-button type="primary" @click="ok">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import SearchOrgTree from './SearchOrgTree';

  export default {
    components: { SearchOrgTree },
    data() {
      return {
        visible: false,
        selectItem: {},
      };
    },
    methods: {
      show() {
        this.selectItem = {};
        this.visible = true;
      },
      hide() {
        this.selectItem = {};
        this.$refs['searchOrgTree'].init();
        this.visible = false;
      },
      ok() {
        this.$emit('on-ok', { ...this.selectItem });
        this.hide();
      },
      onSelectChange(item) {
        this.selectItem = item;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .select-modal-content {
    border: 1px solid #dddddd;
    border-radius: 5px;
    padding: 10px;
    height: 358px;
    overflow: hidden;
  }
</style>
